<template>
  <div>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=no"
    />
    <table  v-for="collect in collects">
      <span v-show="false">{{collect.gid}}</span>
      <tr class="img-wrapper">
        <td ><img :src=collect.gimg /></td>
        <td class="word">
        <span>{{collect.gname}}</span>
        </td>
      </tr>
      <tr class="num">
        ¥{{collect.price}}
      </tr>
      <tr>
        <button class="button" @click="cancelCollect(collect.gid)">取消收藏</button>
      </tr>


    </table>
  </div>
</template>

<script>
  import {onLoadCollect,deleteCollect} from "@/api/user";
  export default {
    inject: ['reload'],
    name: "UserCollect",
    data() {
      return {
       collects:{},
        collect:{
          gimg:'',
          gid:'',
          price:'',
          gname:''
        }
      };
    },
    created() {
      this.onload();
    },
    methods: {
      //加载收藏列表
      onload() {
        onLoadCollect({
          uId:this.$store.state.user.uid
        }).then(result => {
          this.collects = result.data;
        })
          .catch(failResponse => {
            this.$message.error('获取收藏列表失败');
          })
      },
      cancelCollect(gid) {
        deleteCollect({
          uid:this.$store.state.user.uid,
          gid:gid,
        }).then(res => {
            if (res.data.code ===200) {
              this.$message.success("取消收藏成功")
              this.onload();  //重新加载收藏列表
            } else {
              this.$message.error("取消收藏失败，请重试")
            }
          });
        // this.reload();
      },
      toUserIndex() {
        this.$router.replace({path: '/UserIndex', query: {uid: this.$route.query.uid}})
      }
    },
  }
</script>

<style scoped>

  .img-wrapper {
    position: relative;
    width: 100%;
    float: left;
  }
  .img-wrapper img {

    position: absolute;
    width: 150px;
    height: 150px;
    float: left;
  }

  /* 详情介绍的字体大小 */
  .word {
    font-size: 10px;
    position: relative;
    width: 150px;
    left: 170px;
    height: 10rem;
    float: left;
  }
  /* 价格的字体大小颜色 */
  .num {
    position: absolute;
    margin-top: -20px;
    font-size: 20px;
    color: rgb(184, 36, 36);
    width: 50px;
    margin-left: 180px;
    margin-top: 130px;
    float: left;
  }
  .button {
    position: absolute;
    font-size: 3px;
    color: rgb(184, 36, 36);
    margin-left: 190px;
    margin-top: -40px;
    float: left;
  }
</style>
